dropdown: Improve search bar styling

As per the mockup. See:

https://gitlab.gnome.org/Teams/Design/os-mockups/-/blob/master/dropdown-lists/dropdown-lists.png

diff --git a/gtk/gtkdropdown.c b/gtk/gtkdropdown.c
index 669305d53944552b77bd8f6c111403c741d923b1..4d1b17895210da9df81e0e855fc1fe2cea665418 100644 (file)
--- a/gtk/gtkdropdown.c
+++ b/gtk/gtkdropdown.c
@@ -96,6 +96,7 @@ struct _GtkDropDown
   GtkWidget *button_stack;
   GtkWidget *button_item;
   GtkWidget *button_placeholder;
+  GtkWidget *search_box;
   GtkWidget *search_entry;
 
   gboolean enable_search;
@@ -521,6 +522,7 @@ gtk_drop_down_class_init (GtkDropDownClass *klass)
   gtk_widget_class_bind_template_child (widget_class, GtkDropDown, button_item);
   gtk_widget_class_bind_template_child (widget_class, GtkDropDown, popup);
   gtk_widget_class_bind_template_child (widget_class, GtkDropDown, popup_list);
+  gtk_widget_class_bind_template_child (widget_class, GtkDropDown, search_box);
   gtk_widget_class_bind_template_child (widget_class, GtkDropDown, search_entry);
 
   gtk_widget_class_bind_template_callback (widget_class, row_activated);
@@ -936,7 +938,7 @@ gtk_drop_down_set_enable_search (GtkDropDown *self,
   self->enable_search = enable_search;
 
   gtk_editable_set_text (GTK_EDITABLE (self->search_entry), "");
-  gtk_widget_set_visible (self->search_entry, enable_search);
+  gtk_widget_set_visible (self->search_box, enable_search);
   
   g_object_notify_by_pspec (G_OBJECT (self), properties[PROP_ENABLE_SEARCH]);
 }

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 845582650d04c4d79976e098734af05dd17b1fc0..303d1922f6d0063dedc410fd6db55790d0e90938 100644 (file)
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -1230,11 +1230,10 @@ combobox {
       }
    }
 
-    .search { //drodowns with searchboxes on top
-      border-radius: $popover_radius;
-      padding: 3px 10px;
-      border-radius: 3px;
-      margin: 4px 4px -4px 4px;
+    // drodowns with searchboxes on top
+    .dropdown-searchbar {
+      padding: 6px;
+      border-bottom: 1px solid $borders_color;
     }
   }
 }

diff --git a/gtk/ui/gtkdropdown.ui b/gtk/ui/gtkdropdown.ui
index e2dbdaf4d152bc9bb1727363c75368ff19948712..16e55b5b3d76cb8d014a9cffe649281d60724c91 100644 (file)
--- a/gtk/ui/gtkdropdown.ui
+++ b/gtk/ui/gtkdropdown.ui
@@ -55,13 +55,21 @@
       <object class="GtkBox">
         <property name="orientation">vertical</property>
         <child>
-          <object class="GtkSearchEntry" id="search_entry">
-            <signal name="search-changed" handler="search_changed"/>
-            <signal name="stop-search" handler="search_stop"/>
+          <object class="GtkBox" id="search_box">
             <property name="visible">0</property>
-            <property name="max-width-chars">6</property>
-            <property name="width-chars">6</property>
-            <property name="placeholder-text" translatable="yes">Search…</property>
+            <style>
+              <class name="dropdown-searchbar"/>
+            </style>
+            <child>
+              <object class="GtkSearchEntry" id="search_entry">
+                <signal name="search-changed" handler="search_changed"/>
+                <signal name="stop-search" handler="search_stop"/>
+                <property name="hexpand">1</property>
+                <property name="max-width-chars">6</property>
+                <property name="width-chars">6</property>
+                <property name="placeholder-text" translatable="yes">Search…</property>
+              </object>
+            </child>
           </object>
         </child>
         <child>